<template>
  <div class="app-container">
    <el-form
      :model="hospForm"
      :rules="rules"
      ref="hospForm"
      label-width="100px"
      class="demo-hospForm"
    >
      <el-form-item label="医院名称" prop="hosname">
        <el-input v-model="hospForm.hosname" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="医院编号" prop="hoscode">
        <el-input v-model="hospForm.hoscode" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="api基础路径" prop="apiUrl">
        <el-input v-model="hospForm.apiUrl" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="联系人姓名" prop="contactsName">
        <el-input v-model="hospForm.contactsName" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="联系人手机" prop="contactsPhone">
        <el-input
          v-model="hospForm.contactsPhone"
          style="width: 50%"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('hospForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('hospForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import hospset from "@/api/hospset";
export default {
  created() {
    // 获取请求路径中的id值
    var id = this.$route.params.id;
    if (id != undefined) {
      this.id = id;
      // console.log(this.$route);
      // console.log(id);
      // 拿到数据并且填充
      hospset
        .getHospSet(id)
        .then((resp) => {
          this.hospForm = resp.data;
        })
        .catch((error) => {
          alert("获取失败，请重试！");
        });
    }
  },
  data() {
    return {
      id: 0,
      hospForm: {
        hosname: "111",
        hoscode: "1111",
        apiUrl: "1111",
        contactsName: "1111",
        contactsPhone: "11111111111",
      },
      rules: {
        hosname: [
          { required: true, message: "请输入医院名称", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 5 个字符以上", trigger: "blur" },
        ],
        hoscode: [
          { required: true, message: "请输入医院代码", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 5 个字符以上", trigger: "blur" },
        ],
        apiUrl: [
          { required: true, message: "请输入apiUrl", trigger: "blur" },
          { min: 3, max: 50, message: "长度在 5 个字符以上", trigger: "blur" },
        ],
        contactsName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        contactsPhone: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
          { min: 11, max: 11, message: "长度在 11 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.hospForm);
          if (this.id === 0) {
            hospset
              .saveHospitalSet(this.hospForm)
              .then((resp) => {
                // console.log(resp);
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "新增成功!",
                  });
                  this.$router.push({ path: "/hospSet/list" });
                }
              })
              .catch((error) => {
                this.$message({
                  type: "info",
                  message: "新增失败",
                });
              });
          } else {
            hospset
              .updateHospitalSet(this.hospForm)
              .then((resp) => {
                // console.log(resp);
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "新增成功!",
                  });
                  this.$router.push({ path: "/hospSet/list" });
                }
              })
              .catch((error) => {
                this.$message({
                  type: "info",
                  message: "新增失败",
                });
              });
          }
        } else {
          this.$message({
            type: "info",
            message: "您的输入有误，请检查！",
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
</style>